import React, { useState, useEffect } from 'react'
import { Switch, Popconfirm, Button, Form, Input, Col, Table, Card, DatePicker, message } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { formLayout } from '@/utils/utils'
import SearchBox from '@/components/SearchBox'
import { fetchSeckillGoods, deleteSeckillGoods, changeStatus_1, changeStatus_2} from '@/services/marketCenter'
import moment from 'moment'
const { RangePicker } = DatePicker
import {router} from 'umi'
import { connect } from 'dva'

const SeckillGoodsList = props => {
  const { form, stores, supplierType } = props
  const { getFieldDecorator } = form
  const [total, setTotalPage] = useState(0)
  const [pageNo, setPageNo] = useState(1)
  const [loading, setLoading] = useState(false)
  const [defaultChecked, setDefaultChecked] = useState(false)
  const [seckillGoods, setSeckillGoods] = useState([
    {
      id: 193,
      activityName: 'fuck',
      goodsName: 'fuck_2',
      startTime: '2019-10-21',
      endTime: '2019-10-23',
      activityStock: 1000,
      saleYet: 100,
      currentTime: '2019-10-22',
    },
    {
      id: 194,
      activityName: 'fuck',
      goodsName: 'fuck_2',
      startTime: '2019-10-21',
      endTime: '2019-10-23',
      activityStock: 1000,
      saleYet: 100,
      currentTime: '2019-10-22',
    }
  ])
  const [currRecord, setCurrRecord] = useState({})
  const [param, setParam] = useState({
    pageNo: 1,
    pageSize: 10,
  })
  useEffect(() => {
    // 获取会员列表
    _fetchSeckillGoods(param)
  }, [])
  const _fetchSeckillGoods = async (param) => {
    const res = await fetchSeckillGoods(param)
    if (res.code == 0 && res.data.length) {
      setSeckillGoods(res.data)
      setTotalPage(res.total)
    }
  }
  const pagination = {
    total: parseInt(total),
    onChange(page) {
      setPageNo(page)
      _fetchSeckillGoods({
        ...param,
        pageNo: page,
      })
    }
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      _fetchAgenterList({
        ...param,
        ...values,
        startTime: values[0],
        startTime: values[1],
      })
    })
  }
  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'activityName'
    },
    {
      title: '活动商品',
      dataIndex: 'goodsName',
      key: 'goodsName'
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime'
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime'
    },
    {
      title: '库存',
      dataIndex: 'activityStock',
      key: 'activityStock'
    },
    {
      title: '已抢',
      dataIndex: 'saleYet',
      key: 'saleYet',
    },
    {
      title: '状态',
      dataIndex: 'currentTime',
      key: 'currentTime',
      render: (v, r, i) => {
        return (<span>{compareDate(v, r.startTime, r.endTime)}</span>)
      }
    },
    {
      title: `${supplierType==2 ? '商户推荐' : '门店推荐'}`,
      dataIndex: 'supplierTop',
      key: 'supplierTop',
      render: (v, r, i) => {
        return (<Switch onChange={() => handleTop(r)} loading={loading} defaultChecked={defaultChecked} />)
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (v, r, i) => {
        return (<>
          <Button type="primary" onClick={() => editCurr(r)} style={{marginRight: '10px'}}>编辑</Button>
          <Popconfirm
            title={"确定要删除选中的信息？"}
            onConfirm={delCurr}
            okText="确认"
            cancelText="取消"
            okType="danger">
            <Button onClick={setCurrRecord(r)} type="danger">删除</Button>
          </Popconfirm>
        </>)
      }
    },
  ]
  const handleTop = (r) => {
    if (supplierType == 2) {
      // 商家推荐开关调用的接口
    }
    if (supplierType == 4) {
      // 门店推荐开关调用的接口
    }
  }
  const editCurr = (r) => {
    router.push({
      pathname: '/marketCenter/seckillBuy/seckillGoodsConfig',
      query: {
        id: r.id,
        pageNo: pageNo
      }
    })
  }
  const delCurr = async () => {
    const res = await deleteSeckillGoods(currRecord.id)
    res.code == 0 && message.success(res.msg)
    res.code != 0 && message.error(res.msg)
    _fetchSeckillGoods(param)
  }
  const compareDate = (currentTime, startTime, endTime) => {
    console.log(currentTime, startTime, endTime)
    return '进行中'
  }
  const dateFormat = 'YYYY-MM-DD'
  // 查询条件
  const getFields = () => {
    return (<>
      <Col span={8}>
        <Form.Item label="选择时间" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator(`dateTime`, {
            defaultValue: [moment(), moment()]
          })
            (<RangePicker format={dateFormat} />)}
        </Form.Item>
      </Col>
    </>)
  }
  return (<PageHeaderWrapper>
    <Card>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    </Card>
    <Card style={{ marginTop: '10px' }}>
      <Table rowKey={record => record.id} pagination={pagination} size="small" columns={columns} dataSource={seckillGoods} />
    </Card>
  </PageHeaderWrapper>)
}

export default connect(({ global }) => ({
  supplierType: global.supplierType,
}))(Form.create()(SeckillGoodsList))




